<template>
    <div>
        <!--<div class="search-header">-->
            <!--<div class="search-flex">-->
                <!--<el-input v-model="value" placeholder="专项名称" class="right-m">-->
                    <!--&lt;!&ndash;<el-option&ndash;&gt;-->
                        <!--&lt;!&ndash;v-for="item in options"&ndash;&gt;-->
                        <!--&lt;!&ndash;:key="item.value"&ndash;&gt;-->
                        <!--&lt;!&ndash;:label="item.label"&ndash;&gt;-->
                        <!--&lt;!&ndash;:value="item.value">&ndash;&gt;-->
                    <!--&lt;!&ndash;</el-option>&ndash;&gt;-->
                <!--</el-input>-->
                <!--&lt;!&ndash;<el-select v-model="value" placeholder="专项类型" class="right-m" style="width: 120px">&ndash;&gt;-->
                    <!--&lt;!&ndash;<el-option&ndash;&gt;-->
                        <!--&lt;!&ndash;v-for="item in options"&ndash;&gt;-->
                        <!--&lt;!&ndash;:key="item.value"&ndash;&gt;-->
                        <!--&lt;!&ndash;:label="item.label"&ndash;&gt;-->
                        <!--&lt;!&ndash;:value="item.value">&ndash;&gt;-->
                    <!--&lt;!&ndash;</el-option>&ndash;&gt;-->
                <!--&lt;!&ndash;</el-select>&ndash;&gt;-->
                <!--&lt;!&ndash;&nbsp;&nbsp;开始时间：&ndash;&gt;-->
                <!--&lt;!&ndash;<el-date-picker v-model="value1" type="date" placeholder="选择日期"&ndash;&gt;-->
                                <!--&lt;!&ndash;style="width: 140px"></el-date-picker>&ndash;&gt;-->
                <!--&lt;!&ndash;至&ndash;&gt;-->
                <!--&lt;!&ndash;<el-date-picker v-model="value2" type="date" placeholder="选择日期"&ndash;&gt;-->
                                <!--&lt;!&ndash;style="width: 140px"></el-date-picker>&ndash;&gt;-->
            <!--</div>-->

            <!--<div>-->
                <!--<el-button type="primary" class="search-btn" @click="getData1">查询</el-button>-->
                <!--<el-button type="primary" class="refresh-btn">刷新</el-button>-->
            <!--</div>-->
        <!--</div>-->


        <div style="padding: 20px" class="tableCss">
            <el-table ref="singleTable" :data="tableData"
                      :row-style="tableRowStyle"
                      :header-cell-style="tableHeaderColor"
                      @current-change="handleCurrentChange"
                      style="width: 100%;"
                      @row-click="clickRow"
                      @cell-mouse-enter="hoverRow"
            >
                <el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
                <el-table-column min-width="400" property="title" label="专项名称" align="left">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="bottom-start" visible-arrow="false"
                        >
                            <div slot="reference" class="ovf">
                                {{ scope.row.taskName }}
                            </div>
                            <div class="focus-f">
                                <p>专项名称: {{ scope.row.taskName }}</p>
                                <p>专项说明: {{ scope.row.taskExplain }}</p>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column width="150" property="taskTypeName" label="专项类型" align="center">
                </el-table-column>
                <el-table-column width="140" property="createTime" label="开始时间" :formatter="dateFormat" align="center">
                    <!--:formatter="dateFormat"-->
                </el-table-column>
                <el-table-column width="300" property="" label="承办人" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.userName}}/{{scope.row.unitName}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="font-size: 18px;margin: 0 auto" >
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="this.total">
                </el-pagination>
            </div>

        </div>
    </div>
</template>

<script>
    import ht from '../../components/common/address'
    import moment from 'moment'
    import util from 'util'

    export default {
        name: "inOffice",
        data() {
            return {
                Token:'',
                //下拉
                // options: [{
                //     value: '选项1',
                //     label: '2018xx'
                // }, {
                //     value: '选项2',
                //     label: '2018xx'
                // }, {
                //     value: '选项3',
                //     label: '2018xx'
                // }, {
                //     value: '选项4',
                //     label: '2018xx'
                // }, {
                //     value: '选项5',
                //     label: '2018xx'
                // }],
                value: '',
                //表格数据
                tableData: [

                ],
                total:'',
                pageNum:0,
                sizeNum:10,
                currentRow: null,
                ID:'',
                userId:''
            }
        },
        methods:{
            //时间格式转换
            dateFormat:function(row,column){
              var date = row[column.property];
              if (date === undefined){

                  return "";
              }
              return moment(date).format("YYYY-MM-DD")
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.sizeNum = val;
                this.getData();
            },
            //监听页数改变数据
            handleCurrentChange(val) {
                console.log(val-1);
                this.pageNum = val-1
                this.getData()
            },

            clickRow:function (row) {
                console.log(row.id);
                this.ID = row.id;
                // this.$router.push("/detail01");
                this.$router.push({
                    path:'/detail01',
                    query:{
                        id:this.ID
                    }
                });
            },
            // getData1() {
            //     this.Token = localStorage.getItem('token');
            //     this.$http({
            //         method:'GET',
            //         url:ht.Address + "personal/task/findWordTaskByTaskName?taskName="+this.value+""
            //         ,headers:{
            //             "Authorization":this.Token
            //         }
            //     })
            //         .then( (response)=> {
            //             console.log(response.body);
            //             this.total = response.body.data.totalElements;
            //             // this.$router.go(0);
            //             this.tableData = response.data.data;
            //             console.log('userId:',localStorage.getItem("userid"));
            //         }).catch( (error)=> {
            //         console.log('失败');
            //     })
            // },
            getData() {
                this.Token = localStorage.getItem('token');
                this.userId=localStorage.getItem('userid');
                this.$http({
                    method:'GET',
                    url:ht.Address + "personal/task/getTodoByUserId?userId="+this.userId+"&page="+ this.pageNum +"&size="+ this.sizeNum +""
                    ,headers:{
                        "Authorization":this.Token
                    }
                })
                    .then( (response)=> {
                        console.log(response.body);
                        this.total = response.body.data.totalElements;
                        this.tableData = response.body.data.content;
                        console.log('userId:',localStorage.getItem("userid"));
                    }).catch( (error)=> {
                    console.log('失败');
                })
            },
            tableRowStyle({ row, rowIndex }) {
                return 'background-color: #red;font-size: 18px;min-width: 300px;cursor: pointer;'
            },
            // 修改table header的背景色
            tableHeaderColor({ row, column, rowIndex, columnIndex }) {
                if (rowIndex === 0) {
                    return 'background-color: #D7D7D7;color: #1E2A38;font-weight: 500;font-size: 18px;height: 50px;'
                }
            }

        },
        mounted() {
            this.getData();
        }
    }
</script>

<style scoped>
    .tableCss>>> .el-popover{
        padding: 0!important;
        border: 1px solid red!important;
    }
    .focus-f{
        min-width: 300px;
        max-width: 800px;
        font-size: 18px;
    }
    .ovf{
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
    }
    .ovf:hover{
        color: #3E77F8;
    }
    .tableCss>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
        background-color: #ebebeb !important;
        color: #000;
    }
    .tableCss>>>.el-pagination{
        display: flex;
        justify-content: flex-end;
        margin-top: 40px;
    }
    .tableCss>>>.el-pagination.is-background .btn-next,
    .tableCss>>>.el-pagination.is-background .btn-prev,
    .tableCss>>>.el-pagination.is-background .el-pager li{
        background-color: #fff!important;
        border: 1px solid #DDDDDD;
    }
    .search-header{
        margin-top: 30px;
        padding: 20px;
        display: flex;
        justify-content: space-between;
    }
    .search-header>>>.el-input__inner{
        border-color: #AAAAAA!important;
        border-radius: 0px;
        font-size: 18px;
        height: 40px;
    }
    .search-header>>>.el-button--small, .el-button--small.is-round{
        font-family: 微软雅黑!important;
    }
    .right-m{
        margin-right: 10px;
    }
    .search-btn{
        font-size: 18px;
        background-color: #1AB395;
        border-color: transparent;
        border-radius: 0;
    }
    .refresh-btn{
        border-radius: 0;
        font-size: 18px;
        border-color: #9b9b9b;
        background-color: #fff;
        color: rgba(0, 0, 0, 0.83);
    }
    .el-table thead{
        background-color: #D7D7D7!important;
        color: #000!important;
    }
</style>
